<template>

    <div v-if="isshow">
        <div class="Article_introduce">
            <div class="Article_bg" :class="bg"></div>

            <div style="position:relative;flex-grow: 1;">
                <div style="font-size:3rem;font-weight: 550;">{{dataList?.Name}}</div>
                <div style="position:absolute;bottom:2px">{{dataList?.Describe}}</div>
            </div>

        </div>

        <div class="Article">
            <div class="Context" v-if="articledata" v-for="item in articledata" :key="item.ID"
                @click="router.push(`/articleone/${item.ID}`)">
                <div style="position:relative;font-size: 1.8rem;letter-spacing: .15rem;">
                    {{item.article}}
                </div>
                <div style="padding-top:0.8rem;padding-left: .2rem;opacity: .75;font-family:'SimSun' 'FangSong';"
                    v-if="item.describe">
                    {{item.describe}}
                </div>
                <div style="position: absolute ; bottom:.9rem">
                    <span style="color:#22a2c3;">创建时间</span>
                    <span style="color:rgb(110, 72, 47)">：{{ item.CreatedAt}}</span>
                    <span v-if="item.UpdatedAt">&nbsp |
                        <span style="color:#12a182">最后更新</span>
                        <span>：{{ item.UpdatedAt }}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>



</template>

<!------------------------------>

<script setup lang="ts">
//@ts-ignores
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../../stores/counter'


const router=useRouter()
const global = getCurrentInstance()
const route=useRoute()
//Flag:组件渲染
let isshow = ref<boolean>(false)
onMounted(() => {
    isshow.value = true
})
//Flag:监听变化
let Store = useCounterStore()
let { Animation } = storeToRefs(Store)
watch(() => { return Animation.value }, () => {
    isshow.value = false
})

//Flag:数据获取
global?.proxy?.$axios.get(`/v1/getcategoryarticle/${route.params.cate}`).then((res) => {
    if (res.data.status == 200) { 
        articledata.value = res.data.data.map((item :any) => {
            item.CreatedAt = (item.CreatedAt as string).split("T").at(0)
            if ((item.UpdatedAt as string).includes("0001")) {
                item.UpdatedAt = null
            } else {
                item.UpdatedAt = (item.UpdatedAt as string).split("T").at(0)
            }
            return item
        })
    }
})
let articledata=ref()

//Flag:动态背景
let bg = computed(() => {
    switch (route.params.cate) { 
        case 'go':
            return `gourl`
        case 'web':
            return `weburl`
        case 'chat':
            return `chaturl`
        case 'other':
            return 'otherurl'
    }
})

//Flag:数据显示列表
let dataList = computed(() => {
    switch (route.params.cate) {
        case 'go':
            return {
                Name: 'Golang',
                Describe: `Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。Go 语言语法与 C相近，但功能上有：内存安全，GC（垃圾回收），结构形态及 CSP- style 并发计算。`
            }
        case 'web':
            return {
                Name: '前端',
                Describe: `主攻Vue，Node做辅助，顺便搞搞Three；欧耶`
            }
        case 'other': 
            return {
                Name: '其他',
                Describe:`记录一些，知识体系之外的东西`
            }
        case 'chat':
            return { 
                Name: '闲聊',
                Describe:`少年不识愁滋味，爱上层楼；爱上层楼，为赋新词强说愁`
            }
    }
})



</script>

<!------------------------------>

<style scoped lang="scss">

.otherurl{
    background-image: url('../../assets/img/other-bg.png');
}
.gourl{
    background-image: url('../../assets/img/go-bg.png');
}
.weburl{
    background-image: url('../../assets/img/web-bg.jpg');
}
.chaturl{
    background-image: url('../../assets/img/chat-bg.jpg');
}




.Article{
    display: flex;
    flex-direction: column;
    .Context {
    cursor:pointer;
    padding-left: 1.2rem;
    padding-top: 1.1rem;
    padding-right: 1rem;
    padding-bottom: .9rem;
    position: relative;
    margin-left: calc(25vw + 4rem);
    background-color:rgba(255,255,255,.7);
    height: 10rem /* 160px -> 10rem */;
    width: calc(100vw - 25vw - 10rem);
    box-shadow: 0 2px 4px rgb(5 10 15 / 5%),0 7px 13px -3px rgb(5 10 15 / 30%);
    border-radius: .5rem;
    margin-bottom: 2rem;
}
}
.Article_introduce {
    padding: 2rem;
    display: flex;
    position: relative;
    .Article_bg {
        margin-right: 2rem;
        width: 25vw;
        height: 14.0625vw;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 1rem;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
}



</style>